Skip to content

fix(pages): make install-channel command box scrollable - #912

Merged
lizhengfeng101 merged 1 commit into
alibaba:mainfrom
wu21-web:view
Aug 17, 2026
Merged

fix(pages): make install-channel command box scrollable#912
lizhengfeng101 merged 1 commit into
alibaba:mainfrom
wu21-web:view

Conversation

@wu21-web

Copy link
Copy Markdown
Contributor

Description

Screenshot 2026-08-14 at 9 42 16 PM The command box in the picture above is not scrollable, so even if the screen is wide enough, the command will never show completely, it will always end will '...'. This PR make the command box scrollable from left to right, the scroll bar now automatically fade after a short time.

Type of Change

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Refactoring (no functional changes)
  • Documentation update
  • CI / Build / Tooling

How Has This Been Tested?

  • make test passes locally
  • Manual testing (describe below)
    npm run lint & npm commands
    Here is the final effect:
Screen.Recording.2026-08-14.at.9.44.05.PM.mp4

Checklist

  • My code follows the project's coding style (go fmt, go vet)
  • I have performed a self-review of my code
  • I have added tests that prove my fix is effective or my feature works
  • New and existing unit tests pass locally with my changes
  • I have updated the documentation accordingly (if applicable)
  • I have signed the CLA

Related Issues

none yet

@github-actions

github-actions Bot commented Aug 14, 2026

Copy link
Copy Markdown
Contributor

🔍 OpenCodeReview found 1 issue(s) in this PR.

  • ✅ Successfully posted inline: 1 comment(s)

Comment thread pages/src/styles/index.css

@lizhengfeng101 lizhengfeng101 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@lizhengfeng101 lizhengfeng101 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Clean fix for a real UX annoyance — nice work.

A couple of ideas for a follow-up PR if you're interested:

  1. Consider using <div> instead of <span>overflow-x: auto technically only works on block-level elements. It works here because the span is a direct flex child, but it's a bit fragile. If someone later wraps it or changes the parent layout, scrolling could silently break. Swapping to a <div> (or adding explicit display: block) would make the intent clearer.

  2. Scroll hint with a right-edge gradient — Now that the ellipsis is gone, there's no visual cue that the command extends beyond the visible area (especially on macOS where the scrollbar auto-hides). A subtle fade using something like mask-image: linear-gradient(to right, black 90%, transparent) that disappears once scrolled to the end could help discoverability.

Neither of these is blocking — merging as-is. Thanks for the contribution!

@lizhengfeng101
lizhengfeng101 merged commit ec5f685 into alibaba:main Aug 17, 2026
13 checks passed
@wu21-web
wu21-web deleted the view branch August 17, 2026 11:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants